<template>
  <view class="container">
    <view class="tab">
      <view :class="{ tabitem: true, common: index == 0 }" @click="index = 0">相识收藏</view>
      <view :class="{ tabitem: true, common: index == 1 }" @click="getclollect">商品收藏</view>
    </view>
    <!-- 显示相识收藏列表 -->
    <view class="findcollectlist" v-if="index == 0">
      <view class="finditem" @click="godetail">
        <view class="text">兰亭序</view>
        <view class="bottombox">
          <view class="name">建国 王</view>
          <view class="time">2023-10-30 05:45:21</view>
        </view>
      </view>
      <view class="finditem">
        <view class="text">潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上 路，访风景于崇阿；临帝子之长洲，得天人之旧馆</view>
        <view class="bottombox">
          <view class="name">建国 王</view>
          <view class="time">2023-10-30 05:45:21</view>
        </view>
      </view>
      <view class="finditem">
        <view class="text">潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上 路，访风景于崇阿；临帝子之长洲，得天人之旧馆</view>
        <view class="bottombox">
          <view class="name">建国 王</view>
          <view class="time">2023-10-30 05:45:21</view>
        </view>
      </view>
    </view>
    <!-- 显示商品收藏列表 -->
    <view class="goodscollectlist" v-if="index == 1">
      <view class="goodsitem">
        <image src="../static/purse.png" mode="" class="goodsitemimage"></image>
        <view class="goodsinfo">
          <view class="goodsname singe-line">Apple 苹果 IPone14ProApple 苹果 IPone14</view>
          <view>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">4688.00</text>
          </view>
        </view>
      </view>
      <view class="goodsitem">
        <image src="../static/purse.png" mode="" class="goodsitemimage"></image>
        <view class="goodsinfo">
          <view class="goodsname singe-line">Apple 苹果 IPone14ProApple 苹果 IPone14</view>
          <view>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">4688.00</text>
          </view>
        </view>
      </view>
      <view class="goodsitem">
        <image src="../static/purse.png" mode="" class="goodsitemimage"></image>
        <view class="goodsinfo">
          <view class="goodsname singe-line">Apple 苹果 IPone14ProApple 苹果 IPone14</view>
          <view>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">4688.00</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      index: 0
    };
  },
  methods: {
    // 获取收藏列表
    getclollect() {
      this.index = 1;
    },
    // 跳转到详情页
    godetail() {
      uni.navigateTo({
        url: '/sub_my/collectdetail/collectdetail'
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .tab {
    display: flex;
    width: 554rpx;
    height: 100rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 30rpx 0 0 100rpx;
    .tabitem {
      width: 227rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      color: #61bdb2;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .common {
    color: #fff !important;
    background-color: #61bdb2;
  }
  .findcollectlist {
    .finditem {
      width: 706rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin: 22rpx;
      .text {
        padding: 24rpx 14rpx 24rpx 28rpx;
        border-bottom: 1px solid #e7e7e7;
      }
      .bottombox {
        display: flex;
        justify-content: space-between;
        padding: 24rpx 14rpx 24rpx 28rpx;
      }
    }
  }
  .goodscollectlist {
    margin-top: 26rpx;
    .goodsitem {
      display: inline-block;
      width: 340rpx;
      height: 460rpx;
      margin-left: 26rpx;
      margin-bottom: 20rpx;
      .goodsitemimage {
        width: 340rpx;
        height: 340rpx;
      }
      .goodsinfo {
        width: 340rpx;
        height: 120rpx;
        .goodsname {
          font-size: 28rpx;
        }
        .singe-line {
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
